<template>
  <div class="history-today">
    <header class="d-flex space-center middle">
      <div class="line"></div>
      <h4>历史的今天</h4>
      <div class="line"></div>
    </header>
    <van-tabs sticky swipeable @change="selectTab">
      <van-tab v-for="(item, index) in list" :key="index" :title="item.title">
        <timeline :date="selectedDate" :type="item.id" :tab="index"></timeline>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Timeline from './Timeline'
export default {
  components: {
    Timeline
  },
  props: {
    selectedDate: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      active: 0,
      list: []
    }
  },
  created () {
    this.getHistoryType()
  },
  methods: {
    // 获取历史的今天类型
    getHistoryType () {
      this.$http.get({
        url: this.$services.HISTORY_TODAY_TYPE
      }).then(res => {
        this.list = res.body.data
      })
    },
    // 选择tab
    selectTab (e) {
      _czc.push(['_trackEvent', 'history_channel_click', e])
    }
  }
}
</script>
<style lang="scss" scoped>
.history-today {
  header {
    line-height: 0;
    h4 {
      padding: 5px 10px;
      color: #ba6749;
      font-size: 20px;
    }
    .line {
      width: 100px;
      border: 1px solid #f5ddd6;
      box-shadow: 3px 3px 5px #f5ddd6;
    }
  }
  .tabs {
    ul {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      li {
        flex: 1;
        text-align: center;
      }
      .active {
        color: #ba6749;
        font-weight: bold;
      }
    }
    .fixed {
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
      margin-bottom: 20px;
      z-index: 100;
    }
  }
}
</style>
